<template>
    <div class="dashboard-container">
        <!-- 第一行：两个柱状图 -->
        <div class="chart-row">
            <div class="chart-container">
                <div ref="categoryCountChart" class="chart"></div>
            </div>
            <div class="chart-container">
                <div ref="categorySalesChart" class="chart"></div>
            </div>
        </div>

        <!-- 第二行：两个玫瑰图 -->
        <div class="chart-row">
            <div class="chart-container">
                <div ref="priceRoseChart" class="chart"></div>
            </div>
            <div class="chart-container">
                <div ref="salesRoseChart" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

// 图表引用
const categoryCountChart = ref(null)
const categorySalesChart = ref(null)
const priceRoseChart = ref(null)
const salesRoseChart = ref(null)

// 模拟数据
const mockData = {
    categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '服装服饰' },
        { id: 3, name: '家居用品' },
        { id: 4, name: '食品饮料' }
    ],
    products: [
        { category: 1, price: 1999, sales: 150, stock: 50 },
        { category: 1, price: 2999, sales: 80, stock: 30 },
        { category: 2, price: 399, sales: 300, stock: 100 },
        { category: 3, price: 599, sales: 120, stock: 60 },
        { category: 4, price: 49, sales: 500, stock: 200 }
    ]
}

// 处理数据的方法
const processChartData = () => {
    const categoryMap = new Map()

    mockData.categories.forEach(cat => {
        categoryMap.set(cat.id, {
            name: cat.name,
            count: 0,
            totalSales: 0,
            avgPrice: 0
        })
    })

    mockData.products.forEach(product => {
        const category = categoryMap.get(product.category)
        if (category) {
            category.count++
            category.totalSales += product.sales
            category.avgPrice = (category.avgPrice * (category.count - 1) + product.price) / category.count
        }
    })

    return Array.from(categoryMap.values())
}

// 初始化柱状图
const initBarChart = (dom, option) => {
    const chart = echarts.init(dom)
    chart.setOption(option)
    return chart
}

// 初始化玫瑰图
const initRoseChart = (dom, option) => {
    const chart = echarts.init(dom)
    chart.setOption(option)
    return chart
}

// 图表配置
const getBarChartOption = (title, data) => ({
    title: { text: title, left: 'center' },
    tooltip: { trigger: 'axis' },
    xAxis: {
        type: 'category',
        data: data.map(item => item.name),
        axisLabel: { rotate: 45 }
    },
    yAxis: { type: 'value' },
    series: [{
        type: 'bar',
        data: data.map(item => item.value),
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
            ])
        }
    }]
})

const getRoseChartOption = (title, data) => ({
    title: { text: title, left: 'center' },
    tooltip: { trigger: 'item' },
    series: [{
        type: 'pie',
        radius: ['20%', '80%'],
        roseType: 'radius',
        itemStyle: { borderRadius: 8 },
        data: data.map(item => ({
            name: item.name,
            value: item.value
        }))
    }]
})

// 生命周期
onMounted(() => {
    const processedData = processChartData()

    // 商品数量柱状图
    initBarChart(categoryCountChart.value, getBarChartOption('类目商品数量统计',
        processedData.map(d => ({ name: d.name, value: d.count }))
    )),

        // 类目销量柱状图
        initBarChart(categorySalesChart.value, getBarChartOption('类目销量统计',
            processedData.map(d => ({ name: d.name, value: d.totalSales }))
        )),

            // 价格分布玫瑰图
            initRoseChart(priceRoseChart.value, getRoseChartOption('价格分布玫瑰图',
                mockData.products.map(p => ({ name: `¥${p.price}`, value: p.price }))
            )),

                // 销量分布玫瑰图
                initRoseChart(salesRoseChart.value, getRoseChartOption('销量分布玫瑰图',
                    mockData.products.map(p => ({ name: `${p.sales}件`, value: p.sales }))
                )),

                // 响应式调整
                window.addEventListener('resize', () => {
                    [categoryCountChart, categorySalesChart, priceRoseChart, salesRoseChart].forEach(chart => {
                        chart.value && chart.value.resize()
                    })
                })
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => { })
})
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
    background: #f5f7fa;
    min-height: 100vh;
}

.chart-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.chart-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.chart {
    height: 400px;
}

@media (max-width: 768px) {
    .chart-row {
        grid-template-columns: 1fr;
    }
}
</style>